<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>桌子状态</title>
</head>
<style>
    /*html{*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*}*/
    /*body{*/
    /*    margin-top:0px;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background-color: coral;*/

    /*}*/
    body{
        background-image: url(car/bg/2.jpg);

        background-repeat: no-repeat;

        background-size: cover;

        -webkit-background-size: cover;

        -o-background-size: cover;

        background-position: center 0;
    }
    .tableOne{
        border: 1px solid black;
        width: 600px;
        border-collapse: collapse;
    }
    td{
        border: 1px solid black;
        height: 180px;
        line-height: 50px;
        text-align: center;

    }
</style>
<body>
<table align="center" class="tableOne">
    <thead>
    <tr>
        <td style="height: 50px">餐桌编号</td>
        <td style="height: 50px">餐桌图片</td>
        <td style="height: 50px">餐桌状态</td>

    </tr>
    </thead>
 <tbody>
 <c:forEach items="${sessionScope.tables}" var="tables">
     <tr>
         <td>${tables.table_id}</td>
         <td><img src="images/table/${tables.table_image}" height="150px" width="200px" /></td>
         <td>
             <c:if test="${tables.table_status==0}">
                 <span (${tables.table_status})>该餐桌已经被使用</span>
             </c:if>
             <c:if test="${tables.table_status==1}">
                 <span (${tables.table_status})>该餐桌处于空闲状态</span>

             </c:if>
         </td>
     </tr>
 </c:forEach>
 </tbody>
<%--    <tr>--%>
<%--        <th>B</th>--%>
<%--        <th>--%>
<%--            <img src="../images/table/table2.jpg" width="100%"  height="100%">--%>
<%--        </th>--%>
<%--        <th><button style="color: blue" onclick="buttonArray3()">就餐</button></th>--%>
<%--    </tr>--%>
<%--    <tr>--%>
<%--        <th>C</th>--%>
<%--        <th><img src="../images/table/table4.jpg" width="100%" height="100%"></th>--%>
<%--        <th><button style="color: blue" onclick="buttonArray2()">就餐</button></th>--%>
<%--    </tr>--%>
<%--    <tr>--%>
<%--        <th>D</th>--%>
<%--        <th><img src="../images/table/table3.jpg" width="100% "height="100%"></th>--%>
<%--        <th><button style="color: blue" onclick="buttonArray1()">就餐</button></th>--%>
<%--    </tr>--%>
</table>

</body>
<script>
    function buttonArray1(statusId) {
        let msg="";
        if(statusId==0) {
            msg="餐桌为空，可以使用";
        }else {
            msg="餐桌使用中，请前往其他餐桌";
        }
        alert(msg);
    }

</script>
</html>
